<template>
  <div class="container">
    <van-cell-group>
      <van-cell
        title="编辑资料"
        is-link
        clickable
      />
      <van-cell
        title="帐号和隐私设置"
        is-link
        clickable
      />
      <van-cell
        title="第三方绑定管理"
        is-link
        clickable
      />
    </van-cell-group>
    <van-cell-group class="mv-15">
      <van-cell
        title="清理缓存"
        is-link
        clickable
      />
    </van-cell-group>
    <div class="logout-action">
      <van-button
        block
        plain
        square
        type="warning"
        @click="logout"
      >退出登录</van-button>
    </div>
  </div>
</template>
<script>
import {
  Row,
  Col,
  Icon,
  Image,
  Loading,
  Swipe,
  SwipeItem,
  Cell,
  CellGroup,
  Grid,
  GridItem,
  Button
} from 'vant'

export default {
  components: {
    [Image.name]: Image,
    [Loading.name]: Loading,
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem
  },
  created () {},
  methods: {
    async logout () {
      await this.$store.dispatch('user/logout')
      this.$router.replace({ path: '/' })
    }
  }
}
</script>

<style lang="less" scoped>
.logout-action {
  padding: 15px 0;
  .van-button {
    border-left: 0;
    border-right: 0;
    border-color: #f2f2f2;
  }
}
</style>
